<template>
  <div class="leave-type-list">
    <div ref="dgtools" class="filter-container">
      <div class="dgts-row">
        <el-form :model="dg.ps" :inline="true" @keyup.enter.native="getDgList">
          <el-form-item>
            <el-input style="width: 200px" placeholder="请假类型名称" v-model="dg.ps.find" />
          </el-form-item>

          <el-button type="primary" icon="el-icon-search" @click="getDgList">
            搜索
          </el-button>

          <el-button type="primary" icon="el-icon-plus" @click="setAdupLeaveTypeMd({ state: true })">
            添加一级类型
          </el-button>
        </el-form>
      </div>

      <TableSelfSet v-if="dg.columns.length > 0" :tbTitle="'休假类型'" :dgName="dg.dgName" :tbId="dg.tbName"
        :srcCols="dg.srcCols" :columns="dg.columns" @saveSet="saveTbSet" />
    </div>

    <el-table :ref="dg.tbName" :data="dg.list" row-key="id" :height="bodyHeight" border fit :row-class-name="rowClassName"
      @header-dragend="dragHeader" @selection-change="selRowChange" default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
      <el-table-column fixed="left" type="index" label="编号" align="center" :resizable="false" width="40">
      </el-table-column>
      <el-table-column v-for="(col, index) in dg.columns" :key="index" :class-name="dg.dgName" :prop="col.field"
        :label="col.label" :width="col.width">
        <template slot-scope="{row}">
          <template v-if="col.field == 'oper'">
            <template v-if="row.isDefault != 1">

              <el-button type="text" size="small" @click="setAdupLeaveTypeMd({ state: true, row: row })">
                修改
              </el-button>

              <el-button type="text" size="small" @click="delLeaveType(row)">
                删除
              </el-button>

              <el-button v-if="row.pid == 0" type="text" size="small"
                @click="setAdupLeaveTypeMd({ state: true, pobj: row })">
                添加子级
              </el-button>
            </template>

          </template>

          <template v-else>{{ getColVal(row, col.field) }}</template>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-show="dg.total > 0" :total="dg.total" :page.sync="dg.ps.page" :limit.sync="dg.ps.rows"
      @pagination="getDgList" />

    <AdupLeaveType v-if="adupLeaveTypeMd.state" :myData="adupLeaveTypeMd" @myClick="setAdupLeaveTypeMd"
      @reloadDg="getDgList" />

  </div>
</template>
<script>
import DataGridBase from "@/views/mixins/DataGridBase";
import DataGridResize from "@/views/mixins/DataGridResize";
import TableSelfSet from '@/components/TableSelfSet';
import Pagination from "@/components/Pagination";

import AdupLeaveType from "./adup-leave-type";

import * as systemSer from "@/api/services/system.service";

export default {
  name: "LeaveType",
  mixins: [DataGridBase, DataGridResize],
  components: { TableSelfSet, Pagination, AdupLeaveType },
  data() {
    let cols = [
      { label: '类型名称', field: 'typeName' },
      { label: '请假说明', field: 'note', width: 400 },
      { label: '操作', field: 'oper', width: 200 },
    ];

    return {
      dg: {
        dgName: 'dg',
        tbName: 'leaveTypeListTb',
        total: 0,
        list: [],
        srcCols: cols,
        columns: [],
        selRows: [],
        ps: {
          // 过滤参数
          page: 1, rows: 20,
          // 查询类型名称关键字
          find: "",
        },
      },
      // 添加/修改-请假类型-弹框
      adupLeaveTypeMd: { state: false },
    };
  },
  created() {
    const that = this;

    that.initTbSetData(that.dg.dgName);
    that.getDgList();
  },
  methods: {
    /** 获取-分页列表数据 */
    getDgList() {
      const that = this, U = that.U, dg = that.dg, ps = U.scopy(dg.ps);

      systemSer.getLeaveTypeList(ps).then((res) => {
        const { code, data } = res;
        if (code === 1) {
          let list = data;
         
          list.forEach(it => { it.dgName = dg.dgName; });
          dg.list = U.line2treeData(list, 'pid');
         
          dg.total = dg.list.length;
        }
      });
    },

    /** 打开/隐藏-添加/修改请假类型-弹框 */
    setAdupLeaveTypeMd(e) {
      const that = this, U = that.U, md = that.adupLeaveTypeMd;

      if (!e.state) {// 关闭
        md.pobj = null;
        md.obj = null;
        md.state = false;
      } else {// 打开
        if (e.row) {// 修改
          md.obj = e.row;
        } else if (e.pobj) {// 添加子级
          md.pobj = e.pobj;
        } else {// 添加父级

        }
        md.state = true;
      }
    },

    /** 删除-请假类型 */
    delLeaveType(row) {
      const that = this, U = that.U;

      if (row.isDefault == 1) {
        U.qwarning("系统默认的类型，不能删除，请重新选择");
      } else {
        U.qconfim(`确认删请假类型【${row.typeName}】吗？`).then(r => {
          if (r) {
            systemSer.delLeaveType({ did: row.id }).then((res) => {
              const { code, msg } = res;
              if (code !== 1) {
                U.qerror(msg);
              } else {
                U.qsuccess(msg);
                that.getDgList();
              }
            });
          }
        });
      }
    },

  },
};
</script>
